<template>
  <div>
    <div class="house-list-header">
      <van-nav-bar left-arrow @click-left="onClickLeft">
        <template #title>
          <van-search v-model="value" show-action placeholder="请输入小区或地址" background="none">
            <template #label>
              <span @click="toCityList">{{ $store.state.city }}</span>
              <van-icon name="arrow-down" size="12" color="#000" />
            </template>
            <template #action>
              <van-icon name="map-marked" size="25" color="#fff" />
            </template>
          </van-search>
        </template>
      </van-nav-bar>
    </div>
    <van-dropdown-menu :overlay="showOver">
      <van-dropdown-item title="区域" ref="item">
        <template>
          <van-picker
            show-toolbar
            toolbar-position="bottom"
            :columns="area"

          />
            <!-- @confirm="onConfirm"
            @change="onChange" -->
        </template>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="item">
        <template>
          <van-picker show-toolbar toolbar-position="bottom" :columns="ways" />
        </template>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="item">
        <template>
          <van-picker show-toolbar toolbar-position="bottom" :columns="rents" />
        </template>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item" @open='showFn'>
      </van-dropdown-item>
      <van-popup v-model="showPop" position="right" :style="{ width: '80%' ,height:'100%'}" />
    </van-dropdown-menu>
    <HouseItem>
      <template #house-left>
        <img
          src="http://liufusong.top:8080/uploads/upload_926b41aa5c854ea5c84dae367a106deb.jpg"
          alt
        />
      </template>
      <template #house-right>
        <h3>114</h3>
        <div class="house-ms">一室/14/东/秋月枫舍</div>
        <div class="house-tag">近地铁</div>
        <div class="price">
          <span>2100</span>元/月
        </div>
      </template>
    </HouseItem>
  </div>
</template>

<script>
import HouseItem from '@/components/house-item.vue'
// import request from '@/utils/request'
export default {
  name: 'HaokezfHouseList',
  components: {
    HouseItem
  },

  data () {
    return {
      value: '',
      houseList: [],
      area: [
        {
          text: '区域',
          children: [
            {
              text: '不限',
              children: []
            },
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '不限',
              children: []
            },
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ],
      ways: ['不限', '整租', '合租'],
      rents: ['1000一下', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000-7000', '7000以上'],
      showPop: false,
      showOver: true
    }
  },

  mounted () {},

  methods: {
    onClickLeft () {
      this.$router.push('/layout/home')
    },
    toCityList () {
      this.$router.push('/citylist')
    },
    // async getHouseList() {
    //   const res = await request.get('')
    // }
    showFn () {
      this.showOver = false
      this.showPop = true
    }
  }
}
</script>

<style lang="less" scoped>
// .house-list-header {
//   background-color: green;
// }
/deep/.van-nav-bar__title {
  margin-left: 40px;
  max-width: 100%;
}
/deep/ .van-search__content {
  background-color: #fff;
}
/deep/ .van-search__label {
  padding: 0 10px;
}
/deep/ .van-icon-search {
  padding: 0 2px 0 12px;
  border-left: 1px solid #f5f5f5;
}
/deep/ .van-icon-map-marked {
  margin-left: 10px;
  line-height: 34px;
}
</style>
